<!DOCTYPE HTML>
<html>

<head>
   <title> 会员列表</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <link href="../../../assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/bui-min.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/page-min.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/jx-style.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/prettify.css" rel="stylesheet" type="text/css" />
</head>

<body>
   <div class="container">
      <div class="detail-page">
         <div class="detail-page-title">
            <h4>会员列表
            </h4>
         </div>
         <div class="detail-section">
            <div class="detail-row">
               <div class="jx-search-container">
                  <form id="J_Form" class="jx-form form-horizontal jx-form-thin" method="post">
                     <div class="row ">
                        <div class="control-group span7">
                           <label class="control-label">手机号:</label>
                           <div class="controls">
                              <input name="supplierName" type="text" class="control-text">
                           </div>
                        </div>
                        <div class="control-group span2">

                           <button type="submit" class="jx-btn btn-default">搜索</button>

                        </div>
                     </div>

                  </form>
               </div>
               <!-- 表格 start-->
               <div id="grid"></div>
               <!-- 表格 end-->
            </div>
         </div>
      </div>
   </div>
   <script type="text/javascript" src="../../../assets/js/jquery-1.8.1.min.js"></script>
   <script type="text/javascript" src="../../../assets/js/bui-min.js"></script>
   <script type="text/javascript" src="../../../assets/js/config-min.js"></script>
   <script type="text/javascript">
      BUI.use('common/page');
   </script>
   <!-- script start -->
   <script>
      /* 在服务器端可以使用*/
      $('#user-add-btn').click(function (e) {
         top.topManager.openPage({
            id: 'user-add',
            href: 'templates/user/user-list/user-add.html',
            title: '添加品牌'
         });

      });

      BUI.use(['bui/grid', 'bui/data', 'bui/tab', 'common/search'], function (Grid, Data, Tab, Search) {
         var Grid = Grid,
            Store = Data.Store,
            columns = [{
               title: '序号',
               dataIndex: 'o',
               elCls: 'center', //居中
               width: 100
            }, {
               title: '用户ID',
               dataIndex: 'a',
               elCls: 'center', //居中
               width: 100
            }, {
               title: '微信ID ',
               elCls: 'center',
               dataIndex: 'b',
               width: 100
            }, {
               title: '手机号',
               elCls: 'center',
               dataIndex: 'c',
               width: 100
            }, {
               title: '昵称',
               elCls: 'center',
               dataIndex: 'd',
               width: 100
            }, {
               title: '出生日期',
               elCls: 'center',
               dataIndex: 'e',
               width: 100
            }, {
               title: '性别',
               dataIndex: 'f',
               elCls: 'center',
               width: 100
            }, {
               title: '账户类型',
               dataIndex: 'g',
               elCls: 'center',
               width: 100
            }, {
               title: '账户状态',
               dataIndex: 'h',
               elCls: 'center',
               width: 100
            }, {
               title: '注册时间',
               dataIndex: 'i',
               elCls: 'center',
               width: 100
            }, {
               title: '操作',
               dataIndex: 'h',
               elCls: 'center',
               width: 200,
               renderer: function (value, obj) {
                    offStr = '<span class="grid-command btn-frozen">[ 冻结账户 ]</span>';  
                    return offStr;
                }
            }],
            data = [{
               o: '1',
               a: 'uuid',
               b: 'wx_41844575',
               c: '13914041431',
               d: 'Mary',
               e: '1984/03/14',
               f: '女',
               g: '分销用户',
               h: '冻结',
               i: '2018/04/17 15:00',
            }];
         var store = new Store({ //初始化数据
               data: data,
               pageSize: 2 // 配置分页数目
            }),
            grid = new Grid.Grid({
               render: '#grid',
               elCls: 'small-bui-grid-table',
               columns: columns,
               forceFit: true,
               bbar: {
                  // pagingBar:表明包含分页栏
                  pagingBar: true
               },
               plugins: [Grid.Plugins.AutoFit], // 插件形式引入自适应宽度
               store: store
            });
         //点击操作
         grid.on('itemclick', function (ev) {
            var sender = $(ev.domTarget),
               itemEl = $(ev.element),
               item = ev.item;

            if (sender.hasClass('btn-frozen')) { //点击冻结
               FrozenFunction(item, itemEl);

            }
            if (sender.hasClass('btn-off-frozen')) { //点击解冻
               offSaleFunction(item, itemEl);

            }
         });
         //冻结选中的记录
             //禁用选中的记录
         function FrozenFunction(item, itemEl) {
            BUI.Message.Confirm('确认冻结吗？', function () {
               //禁用
               var frozen = $(itemEl).find(".btn-frozen");
               frozen.replaceWith(
                  '<span class="grid-command btn-unfrozen">[ 解除冻结 ]</span>'
               )
            }, 'question');
         }

         function UnfrozenFunction(item, itemEl) {
            BUI.Message.Confirm('确认解除冻结吗？', function () {
               var unfrozen = $(itemEl).find(".btn-unfrozen");
               unfrozen.replaceWith(
                  '<span class="grid-command btn-frozen">[ 冻结账户 ]</span>'
               )
            }, 'question');
         }
         grid.render();
      });
   </script>
   <!-- script end -->

</body>

</html>